<template>
    <div>
        <el-form style="padding: 20px;padding-bottom: 0;" :rules="rules" ref="form" :model="docForm" label-width="130px">
            <!-- <el-form-item label="名称" prop="name">
                <el-input style="width: 520px;" v-model="docForm.name"></el-input>
            </el-form-item>
            <el-form-item label="描述" prop="content">
                <el-input style="width: 520px;" type="textarea" v-model="docForm.content"></el-input>
            </el-form-item> -->
            <el-form-item v-if="docForm.docType=='10'" label="会议时间" style="width: 520px;">
                <el-date-picker v-model="docForm.docDate" value-format="yyyy-MM-dd" style="width:100%" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="附件" prop="docFilePath">
                <div v-for="item in docForm.docFilePath" v-if="docForm.docFilePath.length > 0" style="font-size: 16px;margin-bottom: 5px;color: #333333;" @click.stop="">{{item.fileName}}</div>
                <singlefileUpload style="width: 100px" ref="upload" :ruleFormdocFilePath='docForm.docFilePath' @uploadListDel="uploadListDel" @uploadSave="uploadSave" @returnUrl="returnUrl" @uploadListShow="uploadListShow">
                    <template v-slot:openDialog>
                        <div style="display: flex;flex-direction: column;">
                            <el-button style="width: 100px;" plain>上传附件</el-button>
                        </div>
                    </template>
                </singlefileUpload>
            </el-form-item>
            <el-form-item label="描述">
                <el-input style="width: 520px;" type="textarea" v-model="docForm.content"></el-input>
            </el-form-item>
            <div v-if="docForm.docType=='10'">
                <el-form-item label="关联项目">
                    <el-select v-model="projName" multiple filterable :filter-method="filterChoose" value-key="projId" placeholder="请选择项目" @change="projChoose" style="width: 520px">
                        <el-option v-for="item in projectList" :key="item.projId" :label="item.name" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="关联任务">
                    <!-- <doctask :taskproject='taskproject' :taskMeet='taskMeetList' style="width: 520px" @selectsuccess='selectsuccess'></doctask> -->
                    <selectTask :taskproject='docForm.docTypeId' :taskMeet='taskMeetList' style="width: 520px" @parenIdtchange='parenIdtchange'></selectTask>
                </el-form-item>
            </div>
            <!-- <el-form-item label="是否需要审批" v-if="docForm.docType != '06'">
				<el-switch :disabled="docForm.docType == '05'" v-model="switchType" @change="switchClick" active-color="#13ce66" inactive-color="#ff4949">
				</el-switch>
			</el-form-item>
			<el-form-item label="表单模版" v-if="docForm.docType != '06'">
				<el-select style="width:520px" v-model="manageName" filterable :filter-method="remoteMethodManage"
					clearable placeholder="请选择表单模版" value-key="formKey" @change="manageClick">
					<el-option v-for="item in manage" :key="item.formKey" :label="item.formName" :value="item">
					</el-option>
				</el-select>
			</el-form-item>
      <parser v-if="formData" :value="valueForm" :form-conf="formData" ref="parser" @submit="submit" />
      <el-form-item label="审批流程" v-if="switchType == true && docForm.docType != '06'">
        <el-select style="width:520px" v-model="processName" filterable :filter-method="remoteMethodProcess"
                   clearable placeholder="请选择审批流程" value-key="id" @change="processClick">
          <el-option v-for="item in process" :key="item.id" :label="item.name" :value="item"></el-option>
        </el-select>
      </el-form-item> -->
        </el-form>

        <el-button type="primary" style="margin-left: 150px;" @click="onSubmit('form')">立即修改</el-button>
        <el-button style="margin-left: 15px;" @click="cencel">取消</el-button>
        <!-- 上传列表 -->
        <!-- <uploadList style="z-index: 99999;" v-if="uploadForm.length > 0 && uploadListType == true" :uploadForm="uploadForm" @uploadListDel="uploadListDel"></uploadList> -->
    </div>
</template>

<script>
import selectTask from "@/components/projectComponents/selectTask";
import singlefileUpload from "@/components/upload/singlefileUpload";
import { deleteAction, getAction, postAction, putAction } from "@/api/manage";
import { getAction as manageGetAction } from "@/api/manage";
import Parser from "@/components/FormGenerator/components/parser";
import { save, queryById, update } from "@/api/doc.js";
import uploadList from "@/components/upload/uploadList.vue";
import { list, getMeetProj } from "@/api/project";
import doctask from "@/components/screen/doctask";
export default {
    name: "DocumentEdit",
    data() {
        return {
            taskMeetList: [],
            taskproject: [],
            projectList: [],
            projName: "",
            listQuery: {
                current: 1,
                size: 20,
                name: "",
            },
            docForm: {
                name: "",
                content: "",
                docFilePath: "",
                modelId: "",
                formKey: "",
                formData: "",
                status: "00",
                docType: "",
                dirId: "",
                taskMeet: "",
                docDate: "",
            },
            process: [],
            processName: "",
            manage: [],
            manageName: "",
            formData: "",
            uploadListType: false,
            uploadForm: [],
            valueForm: "",
            switchType: true,
            rules: {
                name: [
                    {
                        required: true,
                        message: "请输入文档名称",
                        trigger: "blur",
                    },
                ],
                content: [
                    {
                        required: true,
                        message: "请输入文档描述",
                        trigger: "blur",
                    },
                ],
                docFilePath: [
                    {
                        required: true,
                        message: "附件不能为空",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    components: {
        singlefileUpload,
        Parser,
        uploadList,
        doctask,
        selectTask,
    },
    created() {
        var queryData = JSON.parse(this.$route.query.data);
        if (queryData.docType) {
            this.docForm.docType = queryData.docType;
        }
        if (queryData.dirId) {
            this.docForm.dirId = queryData.dirId;
        }
        if (queryData.docId) {
            this.docForm.docId = queryData.docId;
            this.listclick();
        }
        this.processList();
        this.manageList();
    },
    methods: {
        parenIdtchange(data) {
            this.docForm.taskMeet = data;
        },
        async listclick() {
            let res = await list(this.listQuery, false);
            this.projectList = res.data.records;
            this.queryClick();
        },
        dirparenIdtchange() {
            this.docForm.dirId = data;
        },
        filterChoose(data) {
            var _this = this;
            if (this.timer) {
                clearTimeout(this.timer);
            }
            this.timer = setTimeout(() => {
                _this.listQuery.name = data;
                _this.listclick();
            }, 500);
        },
        projChoose(data) {
            this.taskproject = data;
            this.taskproject.forEach((item) => {
                this.$set(item, "type", false);
            });
            let projIdArray = [];
            data.forEach((item) => {
                projIdArray.push(item.projId);
            });
            this.docForm.docTypeId = projIdArray.toString();
        },
        selectsuccess(taskId) {
            this.docForm.taskMeet = taskId;
        },
        cencel() {
            var _this = this;
            _this.$store
                .dispatch("tagsView/delView", _this.$route)
                .then(({ visitedViews }) => {
                    _this.$router.push({
                        path: "/document/index",
                    });
                }); // 关闭当前tab回到列表
        },
        onSubmit(formName) {
            var _this = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (_this.formData) {
                        _this.$refs.parser.submitForm();
                    } else {
                        //   if(_this.docForm.docType == '05' || _this.switchType == true){
                        //     if(!_this.docForm.modelId){
                        //       _this.$message.error('请选择审批流程');
                        //       return;
                        //     }
                        //   }
                        update(_this.docForm).then((res) => {
                            _this.$store
                                .dispatch("tagsView/delView", _this.$route)
                                .then(({ visitedViews }) => {
                                    _this.$router.push({
                                        path: "/document/index",
                                    });
                                }); // 关闭当前tab回到列表
                        });
                    }
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        submit(data) {
            var _this = this;
            this.docForm.formData = JSON.stringify(data);
            // if(_this.docForm.docType == '05' || _this.switchType == true){
            //   if(!_this.docForm.modelId){
            //     _this.$message.error('请选择审批流程');
            //     return;
            //   }
            // }
            update(this.docForm).then((res) => {
                _this.$store
                    .dispatch("tagsView/delView", _this.$route)
                    .then(({ visitedViews }) => {
                        _this.$router.push({
                            path: "/document/index",
                        });
                    }); // 关闭当前tab回到列表
            });
        },
        processList(val) {
            var _this = this;
            var name = "";
            if (val) {
                name = val;
            } else {
                name: "";
            }
            getAction(
                "/flowable/processDefinition/list",
                {
                    processDefinitionName: name,
                },
                false
            ).then((res) => {
                const { data } = res;
                this.process = data.records;
            });
        },
        processClick(data) {
            console.log(data);
            this.processName = data.name;
            this.docForm.modelId = data.id;
        },
        remoteMethodProcess(data) {
            if (this.timer) {
                clearTimeout(this.timer);
            }
            this.timer = setTimeout(() => {
                this.processList(data);
            }, 500);
        },
        manageList(val) {
            var _this = this;
            var name = "";
            if (val) {
                name = val;
            } else {
                name: "";
            }
            getAction(
                "/flowable/form/list",
                {
                    formName: name,
                    current: 1,
                    size: 10,
                },
                false
            ).then((res) => {
                const { data } = res;
                this.manage = data.records;
            });
        },
        manageClick(data) {
            console.log(data);
            var _this = this;
            this.manageName = data.formName;
            this.docForm.formKey = data.formKey;
            this.formData = data.formJson;
            if (data.formKey) {
                getAction(
                    "/flowable/form/queryById",
                    {
                        id: data.formKey,
                    },
                    false
                ).then(({ data }) => {
                    if (data.formJson) {
                        _this.formData = JSON.parse(data.formJson);
                    }
                });
            }
        },
        remoteMethodManage(data) {
            if (this.timer) {
                clearTimeout(this.timer);
            }
            this.timer = setTimeout(() => {
                this.manageList(data);
            }, 500);
        },
        // 上传附件
        uploadSave(val) {
            let _this = this;
            _this.docForm.docFilePath = _this.uploadForm;
            _this.$refs.upload.sucessClick();
        },
        queryClick() {
            var _this = this;
            queryById({ id: this.docForm.docId }, false).then((res) => {
                console.log(res);
                _this.docForm = res.data;
                _this.processName = res.data.modelName;
                _this.manageName = res.data.fromName;
                if (_this.docForm.docType == "05") {
                    _this.switchType = true;
                } else if (_this.docForm.modelId) {
                    _this.switchType = true;
                }
                if (res.data.formKey) {
                    getAction(
                        "/flowable/form/queryById",
                        {
                            id: res.data.formKey,
                        },
                        false
                    ).then(({ data }) => {
                        if (data.formJson) {
                            _this.formData = JSON.parse(data.formJson);
                        }
                        if (res.data.formData) {
                            _this.valueForm = JSON.parse(res.data.formData);
                        }
                    });
                }
                let params = new URLSearchParams();
                params.append("projIds", _this.docForm.docTypeId);
                getMeetProj(params, false).then((res) => {
                    this.projName = res.data;
                    _this.projectList.forEach((item) => {
                        this.projName.forEach((data) => {
                            if (item.projId == data.projId) {
                                this.$set(data, "type", false);
                                this.taskproject.push(data);
                            }
                        });
                    });
                });

                _this.taskMeetList = _this.docForm.taskMeet.split(",");
            });
        },
        uploadListShow(data) {
            this.uploadForm = this.docForm.docFilePath;
            this.uploadListType = data;
        },
        returnUrl(data) {
            var docFilePath = {
                fileName: data.name,
                fileUrl: data.url,
            };
            this.uploadForm.push(docFilePath);
        },
        uploadListDel(data) {
            this.uploadForm.splice(data, 1);
        },
        switchClick(data) {
            if (data == false) {
                this.processName = "";
                this.docForm.modelId = "";
            }
        },
    },
};
</script>
